<template>
  <div class="container">
    <div class="box h-p100 box box-ver">
      <div class="box-f1 of-y-s">
        <div class="box box-ac title">
          <div class="icon icon-travel-type"></div>
          <div>出差类型(必选)</div>
        </div>
        <div class="type-list box box-ver">
          <div @click="checkType(index)" v-for="(item, index) in typeObj.list" :value="item" :key="index" class="item box">
            <div class="checkbox">
              <div :class="{'act': typeObj.actIndex===index}" class="icon icon-checkbox"></div>
            </div>
            <div class="right box-f1 box box-ver">
              <div class="name">{{item.expenseTypeName}}</div>
              <div class="tips box">
                <div>
                  <div class="icon icon-invoice-tips"></div>
                </div>
                <div class="tc-888 txt" v-text="item.desc"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="cause">
          <div class="title">出差事由(必填)</div>
          <textarea :readonly="readonly" v-model="bizAccountBill.cause" placeholder="请输入出差事由" class="box"></textarea>
        </div>
      </div>
      <div @click="next()" class="btn-bot">第三步 确认行程信息</div>
    </div>
    <!-- <animation-input :title="'出差事由(必填)'"></animation-input> -->
  </div>
</template>

<script>
// import animationInput from '@/components/animationInput'
import { mapState } from 'vuex'

export default {
  name: 'xinCenStep2',
  // components: {
  //   // animationInput
  // },
  computed: {
    ...mapState(['userInfo', 'bizAccountBill', 'evectionExpense']),
    readonly () {
      let state = this.bizAccountBill.state || 20
      return (+state !== 20)
    }
  },
  data () {
    return {
      typeObj: {
        actIndex: 0,
        expense: {
          '业务差旅': {
            desc: '员工因公务至外地发生的考察、参加会议、业务出差包含(招聘、培训）等国内差旅发生的路宿费、出差补助及出差地市内交通费'
          },
          '交流': {
            desc: '员工交流期间发生的住宿费、交流补助费及交流所在地市内的交通费'
          },
          '境外考察': {
            desc: '出国考察的费用等'
          }
        },
        list: []
      }
    }
  },
  created () {
    if (!this.bizAccountBill.entrys) return this.$router.replace('/')
  },
  mounted () {
    this.initEvectionExpense()
  },
  methods: {
    checkType (index) {
      if (this.readonly) return
      this.typeObj.actIndex = index
    },
    // 初始化出差类型
    initEvectionExpense () {
      let _this = this
      this.typeObj.list = this.evectionExpense.map((item, index) => {
        let { expenseTypeID, expenseTypeName, expenseTypeNumber } = item
        let desc = ''
        for (let i in _this.typeObj.expense) {
          if (expenseTypeName.indexOf(i) > -1) {
            desc = _this.typeObj.expense[i].desc
          }
        }
        if (_this.bizAccountBill.entrys[0].expenseType && expenseTypeID === _this.bizAccountBill.entrys[0].expenseType) {
          _this.typeObj.actIndex = index
        }
        return { expenseTypeID, expenseTypeName, expenseTypeNumber, desc }
      })
    },
    next () {
      let _this = this
      if (!this.bizAccountBill.cause) {
        this.$tools.openToast({
          msg: '请填写事由',
          duration: 2000
        })
        return
      }
      this.bizAccountBill.entrys.forEach(item => {
        item.expenseType = _this.typeObj.list[_this.typeObj.actIndex].expenseTypeID
        item.expenseTypeName = _this.typeObj.list[_this.typeObj.actIndex].expenseTypeName
        item.expenseTypeNumber = _this.typeObj.list[_this.typeObj.actIndex].expenseTypeNumber
      })
      let { expenseTypeID, expenseTypeNumber, expenseTypeName } = _this.typeObj.list[_this.typeObj.actIndex]
      this.$store.commit('bizAccountBill', {
        entrys: this.bizAccountBill.entrys,
        cause: this.bizAccountBill.cause,
        expenseTypeID,
        expenseTypeNumber,
        expenseTypeName
      })
      this.$router.push({
        path: '/xinCenStep3'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.title{
  padding:.25rem .3rem;
  font-size:.3rem;
  .icon-travel-type{
    width:.63rem;
    height:.55rem;
    @include bg-image('../assets/images/icon-travel-type');
    margin-right:.1rem;
  }
}

.type-list{
  background-color:#FFF;
  .item{
    font-size:.36rem;
    border-bottom:1px solid $borderColor;
    height:2.2rem;
    .checkbox{
      margin-top:.1rem;
      margin-bottom:.1rem;
      padding-top:.2rem;
      width:.9rem;
      border-right:1px solid $borderColor;
      .icon-checkbox{
        margin-left:.24rem;
      }
    }
    .right{
      padding-top:.3rem;
      .name{
        padding-left:.3rem;
      }
      .tips{
        font-size:.24rem;
        padding-top:.2rem;
        .icon-invoice-tips{
          width:.3rem;
          height:.3rem;
          margin-right:.1rem;
        }
        .txt{
          line-height: .3rem;
        }
      }
    }
  }
}

.cause{
  margin-top:.2rem;
  background-color:#FFF;
  padding:.2rem .4rem;
  position: relative;
  font-size:.3rem;
  .title{
    margin:0;
    padding:0;
    font-size:.3rem;
  }
  textarea{
    margin-top:.4rem;
    border:1px solid #333;
    border-radius:.2rem;
    padding:.15rem .2rem;
    width:6.6rem;
    font-size:.24rem;
    height:1.5rem;
  }
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
